<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件的监听</title>
</head>
<body>
    <div id="bcid">不要学编程</div>
    <script>
        document.write('<p>一：添加事件监听：</p>');
        document.write('<p style="color:red;">语法：对象.addEventListener("事件名",执行的函数,布尔值(可写可不写));</p>');
        document.write('<p style="color:red;">注：事件名不带on关键字，就只是事件名，如：click，load，mouseout等。</p>');
        document.write('<p style="color:red;">注：第三个参数：指定事件是否在捕获或冒泡阶段执行。</p>');
        document.write('<p>addEventListener() 添加事件监听。</p>');
        function Func() {
            document.getElementById('bcid').innerText = '事件监听' + Math.floor(Math.random()*10);
        }
        document.write('<p>二：移除事件监听：</p>');
        document.write('<p style="color:red;">语法：对象.removeEventListener("事件名",执行的函数,布尔值(可写可不写));</p>');
        function removeFunc() {
            document.getElementById('bcid').removeEventListener('mousemove',Func);
        }
        window.onload = function () {
            var a = document.getElementById('bcid');
            a.addEventListener('mousemove',Func);
            a.addEventListener('click',removeFunc);
        }
    </script>
    <style>
        #bcid{
            width:500px;
            height:300px;
            background-color: red;
            margin:0 auto;
        }
    </style>
</body>
</html>